<!--回弹业务数据字典---试验检测依据管理---查看-->
<template>
  <div class="department" id="department">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
        <div></div>
      </div>
      <tree :treeData="treeData" nodeKey="fCompanyid" @getTreeInfo="handleNodeClick" :defaultProps="defaultProps">
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <el-breadcrumb :title="showName"></el-breadcrumb>
      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left"></div>
        <!-- 顶部按钮 -->
        <div class="print" style="justify-content: flex-end">
          <el-button type="primary" icon="el-icon-refresh" size="small" @click="yj_searchForm(getList)">
          </el-button>
          <el-button type="primary" v-if="yj_view" icon="el-icon-search" size="small" @click="yj_editForm()">查看
          </el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="text_table">
        <tableData :height="navigatepageNums > 1 ? 'calc(100% - 50px)' : '100%'" :config="table_config" :rowKey="rowKey"
          :dataList="tableData" :loading="listLoading" @selection-change="selectionChange" @sort-change="sortChange"
          @click-change="rowChange" @openDialog="openDialog" :page="queryCriteriaData.pageNum"
          :pageSize="queryCriteriaData.pageSize" />
        <pagination v-if="navigatepageNums > 1" :treelength="treelength" :total="queryCriteriaData.total"
          :info="queryCriteriaData" :pageNum.sync="queryCriteriaData.pageNum" :limit.sync="queryCriteriaData.pageSize"
          @pagination="yj_searchForm(getList)" />
      </div>
      <!--弹框 查看 -->
      <div class="Control-1 bansetting">
        <el-dialog :title="editDialog" :modal-append-to-body="false" v-dialogDrag :visible.sync="dialogEditVisible"
          v-loading="loadingEditDialog" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody common" :style="{ height: '550px' }">
            <div style="height: 100%">
              <!-- @changeRadio="changeRadio" -->
              <publicForm ref="publicForm" lableWidth="60px" :formObj="formObj" :formData="formData"
                @selectChange="selectChange">
              </publicForm>
            </div>
          </div>
          <div class="newlyAdded_btn" v-if="submitFlag">
            <el-button type="primary" @click="yj_saveForm('formData')">保存</el-button>
            <el-button type="warning" @click="dialogEditVisible = false">关闭</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import tree from "@/components/public/el-tree";
import TableData from "@/components/public/el-table";
import elBreadcrumb from "@/components/public/el-breadcrumb.vue";
import publicForm from "@/components/public/el-form.vue";
import Pagination from "@/components/public/el-pagination"; //主页面分页

import {
  getChecknodeList, //树状图接口
  getCheckitemsPageList, //列表
  getCheckitemsByFid, //详情
} from "@/api/request.js";

export default {
  name: "experiment",
  data() {
    return {
      name: "experiment", //按钮配置页面代号
      yj_add: null, //新增按钮是否显示
      yj_edit: null, //编辑按钮是否显示
      yj_view: null, //查看按钮是否显示
      submitFlag: null, //是否显示保存按钮
      formObj: [
        {
          input: true, //是input
          label: "标准类型",
          prop: "fChecktype",

          width: 24, //参考el-col
          disabled: true,
          options: [],
        },
        {
          input: true, //是input
          label: "标准代号",
          prop: "fItemno",

          width: 24, //参考el-col
          disabled: true,
        },
        //
        {
          input: true, //是input
          label: "标准名称", //字段
          prop: "fItemname", //字段名
          width: 24, //参考el-col
          disabled: true, //是否禁用
        },

        {
          textarea: true, //是input
          label: "备注", //字段
          prop: "fNote", //字段名
          width: 24, //参考el-col
          disabled: true, //是否禁用
        },
      ],
      formData: {}, //新增编辑向后台传递对象
      editDialog: null, //dialog的title新增、编辑、查看
      glInfo: null, //骨料详情对象，页面编辑发生改变
      rowKey: "fId", //拌和站树状列表rowKey
      // 拌和站列表配置项
      table_config: {
        imgKeyWord: "url",
        fileKeyWord: "url",
        fileName: "fFileName",

        dialogHeight: "",
        thead: [
          {
            label: "标准代号",
            prop: "fItemno",
            minWidth: "150px",
            routerPath: "xxx",
            align: "left",
          },
          {
            label: "标准名称",
            prop: "fItemname",
            minWidth: "100px",
            routerPath: "xxx",
            align: "left",
          },
          {
            label: "备注",
            prop: "fNote",
            minWidth: "150px",
            routerPath: "xxx",
            align: "left",
          },
        ],
        isCheckBox: false,
        isIndex: true,
        isOperation: true,
        // 表格操作列
        // operation: {
        //     label: '操作',
        //     width: '100',
        //     detail: true,
        //     cols: [
        //         {
        //             label: '查看',
        //             type: 'primary',
        //             handleRow: this.handleRow
        //         },

        //     ]
        // },
      },

      highlightBd: true, //左侧机构树停留背景色
      treelength: false, //左侧树显示隐藏
      checked: true, //查看下级
      showName: "未选择公司",
      dialogHeight: "330px", //新增编辑弹框高度
      fId: null, //点击当前列表数据fId
      listLoading: false, //列表数据加载loading
      loadingEditDialog: false, //弹框loading
      dialogEditVisible: false, //新增弹框是否显示
      // 列表给后端传参
      getList: {
        modelType: "",
      },

      companyTree: "", //所有数据
      treeData: [], //左侧树状图数据
      tableData: [], //表格列表数据列表
      // 左侧机构树
      defaultProps: {
        children: "children",
        label: "fName",
      },
      userInfo: {}, //登录用户
      treeText: {
        //树状图参数
        companyId: null,
        userId: null,
      },

      // 分页
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {},
      // 分页
    };
  },
  components: {
    tree, //左侧组织机构数
    TableData, //主页面列表
    elBreadcrumb, //面包屑
    publicForm, //弹框表格
    Pagination
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("monitorBack-userInfo"));
    this.getTree();
    this.btnRole(this.name);
  },
  methods: {
    btnRole(name) {
      // 按钮权限
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("monitorBack-ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });
        this.yj_view = btnStr.includes("yj_view");
      } else {
        this.yj_view = true;
      }
    },
    // 点击列表当前行，获取当前信息
    rowChange(row) {
      this.fId = row.fId;
    },
    // 左侧树结构
    getTree() {
      this.treeText.companyId = this.userInfo.companyId;
      this.treeText.userId = this.userInfo.userId;
      getChecknodeList(this.treeText)
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.checknodeList;
            this.treeData = this.tranListToTreeData(companyTree); //将接口返回数据二次处理，形成树状图结构
            if (this.treeData[0].children == undefined) {
              this.treelength = false; //左侧组织机构是否显示
            } else {
              this.treelength = true;
            }
            this.showName = this.treeData[0].children[0].fName; //当前点击组织机构名称
            this.getList.modelType = this.treeData[0].children[0].fId; //当前点击组织机构ID
            this.yj_searchForm(this.getList); // 调用主页面列表接口
            // modelType
          } else {
            this.$message.error("机构树", res.msg);
          }
        })
        .catch(() => {
          console.log("机构树");
        });
    },
    tranListToTreeData(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      // 清除已存在的children 重新赋值
      data.forEach((item) => {
        delete item.children;
      });

      let map = {};
      data.forEach((item) => {
        map[item.fId] = item;
      });

      data.forEach((item) => {
        let parent = map[item.fParentid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    // 点击左侧机构树
    handleNodeClick(data) {
      this.showName = data.fName; //顶部显示机构名
      this.getList.modelType = data.fId;
      this.yj_searchForm(this.getList);
    },

    // 获取列表数据
    yj_searchForm(data) {
      this.listLoading = true;
      getCheckitemsPageList(data)
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;
            that.listLoading = false;
            that.tableData = res.data.checkitemsList.list;
            that.queryCriteriaData = res.data.checkitemsList; //分页信息
            that.navigatepageNums =
              res.data.checkitemsList.navigatepageNums.length;
          } else {
            this.$message.error("获取列表数据", res.msg);
            this.listLoading = false;
          }
        })
        .catch(() => {
          console.log("获取列表数据");
          this.listLoading = false;
        });
    },
    // 查看
    yj_editForm() {
      this.editDialog = "查看";
      this.submitFlag = false; //不显示提交按钮

      if (this.fId != null && this.fId != "") {
        this.dialogEditVisible = true;
        this.loadingEditDialog = true;
        getCheckitemsByFid({ fId: this.fId })
          .then((res) => {
            if (res.errcode == 0) {
              this.formData = res.data.lrCheckCheckitems;
              this.loadingEditDialog = false;
            } else {
              this.$message.error("查看", res.msg);
              this.loadingEditDialog = false;
            }
          })
          .catch(() => {
            console.log("查看");
            this.loadingEditDialog = false;
          });
      } else {
        return this.$message.error("请选择需要查看的数据");
      }
    },

    // 删除
    yj_delForm(id) {
      return id
    },

    // 关闭新增编辑弹框
    resetForm() {
      this.dialogEditVisible = false;
    },

    // 拌合站下拉框
    selectChange(value) {
      this.formData.fStationid = value.value; // 拌合站id
      this.formData.fStationname = value.label; // 拌合站名称
    },

    // 多选方法
    selectionChange() { },
    // 排序方法
    sortChange() { },
    // 点击设备编码
    openDialog(row) {
      return row
      // this.fId = row.F_Id;
      // this.editText(this.fId);
    },
  },
};
</script>
 
<style scoped>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}
</style>